<template>
  <div>
    <div class="control">
      <Button type="primary" @click="add">添加</Button>
    </div>
    <Table :loading="loading" :columns="tableColumns" :data="tableData" :border="true">
      <template slot="is_super" slot-scope="{row,index}">
        <span v-if="row.is_super===1">是</span>
        <span v-else>否</span>
      </template>
      <template slot="action" slot-scope="{row,index}">
        <div class="flex flex-between">
          <Button type="primary" @click="edit(row)">编辑</Button>
          <Button type="error" @click="del(row)">删除</Button>
        </div>
      </template>
    </Table>
    <div class="pagination">
      <Page :total="count" :page-size="pageSize" show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
    </div>

    <Modal v-model="modal" title="添加/编辑" :draggable="false">
      <div slot="footer">
        <Button @click="modal = false">取消</Button>
        <Button type="primary" @click="handlerSubmit">确定</Button>
      </div>
      <Form ref="editForm" :model="editForm" :rules="formRules" :label-width="80">
        <FormItem label="名称" prop="name">
          <Input v-model="editForm.name"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input v-model="editForm.password"></Input>
        </FormItem>
        <FormItem label="角色" prop="role_id">
          <Select v-model="editForm.role_id">
            <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { list, edit, del } from "@/api/admin/admin";
export default {
  name: "user",
  data() {
    return {
      loading: false,
      tableColumns: [
        { title: "ID", key: "id" },
        { title: "用户名", key: "name" },
        { title: "角色名", key: "role_name" },
        { title: "上次登录时间", key: "last_login_time" },
        { title: "注册时间", key: "create_time" },
        { title: "操作", slot: "action", width: 180 },
      ],
      tableData: [],
      count: 0,
      pageIndex: 1,
      pageSize: 10,
      modal: false,
      editForm: {
        name: "",
        password: "",
        role_id: "",
      },
      formRules: {
        name: [{ required: true, message: "请填写用户名", trigger: "blur" }],
      },
      storeList: [],
      roleList: [],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      const that = this;
      this.loading = true;
      list({ pageIndex: this.pageIndex, pageSize: this.pageSize }).then(
        (res) => {
          that.tableData = res.data.data;
          that.count = res.data.count;
          that.loading = false;
        }
      );
    },
    loadRole() {
      const that = this;
      this.$axios.get("admin/user/loadRole").then((res) => {
        that.roleList = res.data;
      });
    },
    handlerSubmit() {
      const that = this;
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          that.$Spin.show();
          edit(that.editForm).then((res) => {
            that.$Spin.hide();
            that.loadData();
          });
          that.modal = false;
        }
      });
    },
    add() {
      this.editForm = {};
      this.modal = true;
      this.loadRole();
      this.loadStore();
    },
    edit(row) {
      this.editForm = row;
      this.modal = true;
      this.loadRole();
      this.loadStore();
    },
    del(row) {
      const that = this;
      this.$Modal.confirm({
        title: "确认删除？",
        content: "此操作不可逆，是否确认删除当前这条数据",
        onOk: () => {
          del({ id: row.id }).then((res) => {
            if (res.code === 0) {
              that.$Message.success("删除成功");
              that.loadData();
            }
          });
        },
      });
    },
    changePage(e) {
      this.pageIndex = e;
      this.loadData();
    },
    changePageSize(e) {
      this.pageSize = e;
      this.loadData();
    },
  },
};
</script>

<style scoped>
</style>